<template>
  <div>
    <div>
      <!-- v-for可以遍历 数组 或者 对象，用于渲染结构 -->
      <!-- eslint-disable-next-line -->
      <!-- <ul v-for="item in arr">
        <li>{{ item }}</li>
      </ul> -->
      <!-- eslint-disable-next-line -->
      <ul v-for="item in renderData.data">
        <li>
          {{
            '姓名' +
            ':' +
            ' ' +
            item.uname +
            ' ' +
            '成绩' +
            ':' +
            ' ' +
            item.score
          }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      renderData: {
        message: '获取数据成功',
        data: [
          {
            uname: '陈志豪',
            score: '100',
          },
          {
            uname: '沈德亮',
            score: '95',
          },
          {
            uname: '侯涵翔',
            score: '60',
          },
          {
            uname: '石益涛',
            score: '99',
          },
          {
            uname: '魏芳芳',
            score: '150',
          },
          {
            uname: '郑新新',
            score: '150',
          },
        ],
      },
    }
  },

  methods: {},
}
</script>

<style scoped></style>
